首先,我们要通过 npm/Yarn 或一个 CDN 链接安装 axios。
我们首先创建一个 data 里的 property 以最终放置信息,然后将会在 mounted 生命周期钩子中获取数据并赋值过去,以比特幣時價API為例:https://api.coindesk.com/v1/bpi/currentprice.json:
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
// 加入 try catch 檢查 api 狀態,並最後解除loading動畫
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => {
this.info = response.data.bpi
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
}
// 會得到 get api response
})
// 用迴圈取出所有對應幣種及幣值
<div id="app">
<h1>Bitcoin Price Index</h1>
<div
v-for="currency in info"
class="currency"
>
{{ currency.description }}:
<span class="lighten">
<span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
</span>
</div>
</div>
// 使用filter取值並四捨五入至小數點後2位
filters: {
currencydecimal (value) {
return value.toFixed(2)
}
},